<template>
    <x-popup v-model="showPopup" top="30vh" :auto-hide-tab-bar="props.autoHideTabBar">
        <view class="h6 font-weight-600 p-4 text-center">{{WEBCONFIG?.vip_member_name}}</view>
        <view class="flex-1 flex flex-column overflow-auto bg-grey p-4">
            <view class="flex flex-center p-4 rounded-4 bg-white mb-4" v-for="item in list" :key="item.id" @tap="clickItem(item)">
                <view class="flex-1">
                    <view class="font-weight-600">{{ item.title }}</view>
                    <view class="text-dark-light-5 h10">有效期：{{ item.day_text }}</view>
                </view>
                <view class="h1 font-weight-600 text-primary">
                    <text>{{ item.price }}</text>
                    <text class="h10">/元</text>
                </view>
            </view>
        </view>
        <view class="pb-safe-area bg-grey">
            <view class="py-4">
                <view class="flex flex-center">
                    <view class="h10 text-dark-light-5">请仔细阅读</view>
                    <view class="h10 text-primary ml-2"
                        @tap="$page.open('/pages/article/content?alias=vip_member_instructions')">《会员说明》</view>
                </view>
            </view>
        </view>
        <x-pay ref="xPayRef" @success="paySuccess" :auto-hide-tab-bar="props.autoHideTabBar" />
    </x-popup>
</template>
<script lang="ts" setup>
import { $http, $page,$system,$message } from '@/utils';
import { onMounted, ref,defineProps } from "vue";
import { useUserStore,useWebConfigStore,useRefs } from "@/stores";
const props = withDefaults(defineProps<{
	autoHideTabBar?: boolean,
}>(), {
});
const webConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(webConfigStore);
const showPopup = ref(false);
const list = ref<any[]>([])
const xPayRef = ref();
const emit = defineEmits(['success']);
const { setUserInfo, clearUserInfo } = useUserStore();
onMounted(() => {
    getVipMemberList()
})
const show = () => {
    // #ifdef MP-WEIXIN
    if(WEBCONFIG.value?.wechat_mp_audit&&$system.isIOS()){
        $message.error('iOS系统微信小程序暂不支持支付');
        return;
    }
    // #endif
    showPopup.value = true;
}
const getVipMemberList = () => {
    $http.get('VipMember/list').then((res: any) => {
        if (res.code === $http.ResponseCode.SUCCESS) {
            list.value = res.data
        }
    })
}
const clickItem = (item: any) => {
    xPayRef.value.show({
        type: 'vip_member',
        alias_id: item.id,
        price: item.price,
        title: item.title
    });
}
const paySuccess = () => {
    $http.get('User/info').then((res: any) => {
        if (res.code === $http.ResponseCode.SUCCESS) {
            setUserInfo(res.data).catch(() => { });
        } else if (res.code === $http.ResponseCode.NEED_LOGIN) {
            clearUserInfo();
        }
    }).catch(() => {
    })
    showPopup.value = false;
    emit('success')
}
defineExpose({ show });
</script>